import {useNavigate} from 'react-router-dom'
import {NavBar} from 'antd-mobile'
import { useDetail } from './useDetail'


const Detail =()=>{
    const {detail}  = useDetail()

    //数据返回之前Loading渲染占位
    const navigate = useNavigate()
    const back = () => navigate(-1)

    //数据返回之后正式渲染的内容
    if (!detail) {
        return <div>this is loading</div>
      }
    return (
        <div>
            <NavBar onBack={back}>{detail?.title}</NavBar>
            <div dangerouslySetInnerHTML={{ 
                __html: detail?.content 
            }}></div> 
        </div>
    )
}
export default Detail